<template>
  <div id="nav">
    <van-nav-bar title="登录「胡说八道」">
      <template #left>
        <!-- <van-icon name="smile" size="30" /> -->
      </template>
    </van-nav-bar>
  </div>
  <div class="content">
    <van-form @submit="login_submit">
      <van-icon name="wechat" size="100" />

      <van-field
        v-model="login_data.userName"
        name="userName"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="login_data.password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />

      <div style="margin: 16px;">
        <van-button round block type="success" native-type="submit">提交</van-button>
      </div>
      <div class="operation">
        <a @click="register_view_display = true">注册账号</a>
        <a href="#">找回密码</a>
      </div>
      <div class="register_view">
        <van-action-sheet
          v-model:show="register_view_display"
          title="注册账号"
          :close-on-click-overlay="false"
        >
          <div>
            <van-field
              name="userName"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              type="password"
              name="password"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
              type="password"
              name="确认密码"
              label="确认密码"
              placeholder="确认密码"
              :rules="[{ required: true, message: '请填写确认密码' }]"
            />

            <div style="margin: 16px;">
              <van-button round block type="primary" native-type="submit">注册</van-button>
            </div>
          </div>
        </van-action-sheet>
      </div>
    </van-form>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
import { Notify } from 'vant';
import { login } from '@/api/requests/base'
import router from '@/router/index'
import { getUserDataCache, setUserDataCache, setToken } from '@/utils/app'

export default {
  props: {
  },
  setup () {
    const register_view_display = ref(false)
    const login_data = ref({
      userName: '',
      password: ''
    })
    const login_submit = (data) => {
      login(data).then(res => {
        if (res.code == 500) {
          Notify({ type: 'danger', message: res.msg })
        } else {

          Notify({ type: 'success', message: '登录成功' })
          const data = res.data
          setUserDataCache(data.info)
          setToken(data.token)
          setTimeout(() => {
            router.push('/')
          }, 1000)
        }
      })
    }
    return {
      login_data,
      login_submit,
      register_view_display,
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  margin: 20px;
  text-align: center;
  background-color: #f7f8fa;
  .operation {
    margin-left: 15px;
    text-align: left;
    a {
      margin-left: 15px;
      color: #212121;
    }
  }
  .register_view {
    height: 50vh;
    padding: 15px;
  }
}
</style>
